<template>
  <div class="container">
    <div class="cheader2">
      <van-icon
        @click="goBack"
        class="chl"
        name="arrow-left"
        color="#000"
        size="20"
      />
      <div class="chtitle">充值</div>
      <div class="djbox"></div>
    </div>
    <div class="bbox">
      <div
        :class="chainIndex === 0 ? 'bb1 bb2' : 'bb1'"
        @click="
          chainIndex = 0;
          handleChainInfo();
        "
      >
        波场链TRC-20
      </div>
      <div
        :class="chainIndex === 1 ? 'bb1 bb2' : 'bb1'"
        @click="
          chainIndex = 1;
          handleChainInfo();
        "
      >
        币安链BEP-20
      </div>
    </div>
    <div class="mbox">
      <img class="qcord" :src="qrcodeImg" alt="" />
      <div class="m1">仅支持对该地址充值USDT</div>
      <div class="m2">
        USDT充值地址({{ chainIndex === 0 ? "波场链" : "币安链" }})
      </div>
      <div class="m3">{{ infos.address }}</div>
      <div class="m4" @click="copyDomText(infos.address)">复制地址</div>
      <div class="m5">
        提示：请勿向上述地址充值任何非USDT资产，否则资产不可找回。<br />
        您充值至上述地址后，需要整个网络社区确认，请耐心等待。 最小充值金额为{{
          infos.minimumRechargeAmount
        }}USDT，小于最小金额的充值将不会上账， 且无法退回。
      </div>
    </div>
  </div>
</template>
  
  <script setup lang='ts'>
import QRCode from "qrcode";
import { onMounted, reactive, ref, toRefs } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "@/store";
import { copyDomText } from "@/utils/common";
const store = useStore();
const router = useRouter();
const chainIndex = ref(0);
const chainList = ref<any[]>([]);
let infos: any = reactive({
  address: "",
  minimumRechargeAmount: 0,
});
const goBack = () => {
  router.go(-1);
};
const qrcodeImg = ref("");

onMounted(() => {
  store.dispatch("users/getRechargeInfo").then((res: any) => {
    console.log(res);
    if (res.code === 0) {
      chainList.value = res.data;
      // infos.address = res.data.address;
      // infos.minimumRechargeAmount = res.data.minimumRechargeAmount;
      // createQRCode();
      handleChainInfo();
    }
  });
});
const handleChainInfo = () => {
  const tron = chainList.value.find((v) => v.chain === "TRON");
  const bsc = chainList.value.find((v) => v.chain === "BSC");
  if (chainIndex.value === 0) {
    infos.address = tron.address;
    infos.minimumRechargeAmount = tron.minimumRechargeAmount;
  } else {
    infos.address = bsc.address;
    infos.minimumRechargeAmount = bsc.minimumRechargeAmount;
  }
  createQRCode();
};
const createQRCode = () => {
  QRCode.toDataURL(infos.address, {
    version: 7, //版本号
    errorCorrectionLevel: "Q",
    width: 280,
    height: 280,
  }).then((url: string) => {
    qrcodeImg.value = url;
  });
};
</script>
  
  <style lang="scss" scoped>
.cheader2 {
  z-index: 1001;
  width: 100%;
  height: 45px;
  background-color: #fff;
  font-size: 16px;
  color: #000;
  position: fixed;
  top: 0;
  left: 0;
  .chl {
    position: absolute;
    left: 16px;
    top: 50%;
    text-align: center;
    transform: translateY(-50%);
  }
  .chtitle {
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
  }
  .djbox {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    img {
      width: 16px;
      margin-right: 4px;
    }
    div {
      font-size: 13px;
      color: #878b97;
    }
  }
}
.mbox {
  // margin-top: 45px;
  padding: 10px 16px;
  .qcord {
    width: 180px;
    height: 180px;
    margin: 0px auto 20px;
    display: block;
    border-radius: 2px;
  }
  .m1 {
    font-size: 13px;
    color: #666;
    text-align: center;
    margin: 0px 0 30px;
  }
  .m2 {
    font-size: 13px;
    color: #878b97;
    text-align: center;
    margin: 0 0 12px;
  }
  .m3 {
    font-size: 14px;
    color: #000;
    text-align: center;
  }
  .m4 {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    background: #36b4ea;
    border-radius: 3px;
    margin: 20px 0;
  }
  .m5 {
    font-size: 12px;
    color: #878b97;
    line-height: 18px;
  }
}
.bbox {
  margin-top: 45px;
  display: flex;
  padding: 10px 20px;
  .bb1 {
    width: 110px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    background: #f1f1f1;
    color: #878b97;
    border-radius: 3px;
    margin-right: 10px;
    font-weight: 600;
    &.bb2 {
      color: #fff;
      background: #36b4ea;
    }
  }
}
</style>